<script setup lang="ts">
import { ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import About from './components/About.vue';
import { ElButton } from 'element-plus';

const helloWorldRef = ref();
const aboutRef = ref();
const courseId = ref(0);

const showModal = () => {
  // 打印当前网址
  console.log(window.location.href);
  // 解析当前网址的Hash
  const hash = new URLSearchParams(window.location.hash.slice(1));
  const entries = hash.entries();
  for (const [key, value] of entries) {
    console.log(`${key}: ${value}`);
    if (key === '/web/ind_ThemeCourses?id') {
      console.log(`${key}: ${value}`);
      courseId.value = Number(value);
      helloWorldRef.value.visible = true;
    }
    else if (key == '/web/ind_paper/exam/do?id') {
      // 读取页面上所有class为Examination_type-item的div
      const items = document.querySelectorAll('.Examination_type-item');
      items.forEach(item => {
        // console.log(item.textContent);
        const type = item.querySelector('.Examination_item_type');
        const title = item.querySelector('.Examination_item_title');
        // 查询diplay不为none的Examination_item_option
        const options = item.querySelectorAll('.Examination_item_option');
        console.log(type!.textContent, title!.textContent, options[4]?.textContent);
        // 在所有Option下增加一个div
        const answerCard = document.createElement('div');
        answerCard.className = 'Examination_item_answer';
        answerCard.innerText = options[4]?.textContent || '';
        item.appendChild(answerCard);
      });
    }
  }
};

const showAboutModal = () => {
  aboutRef.value.visible = true;
};

</script>

<template>
  <el-button type="primary" round class="float-button" @click="showModal">
    启动
  </el-button>
  <el-button round class="float-button-about" @click="showAboutModal">
    ?
  </el-button>
  <HelloWorld :courseId="courseId" ref="helloWorldRef" />
  <About ref="aboutRef" />
</template>

<style scoped>
.float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
  padding: 0;
}

.float-button-about {
  position: fixed;
  bottom: 20px;
  right: 90px;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
  padding: 0;
}
</style>
